<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html>

<html xmlns:c="http://java.sun.com/jsp/jstl/core">
<head>
	<!-- CSS-Dateien verknÃ¼pfen -->
    <link type="text/css" rel="stylesheet" href="<c:url value="/resources/style/standard.css"/>" />
    <link type="text/css" rel="stylesheet" href="<c:url value="/resources/style/seriencharts.css"/>" />
<title>Seriencharts</title>
</head>

<body>
	<!-- Header mit Menüleiste -->
	<%@ include file="./header.jsp" %>
	
	<div class="text">
		<h1>Ranking aller Serien:</h1>
		 <div class="charts">
				<ol>
					<c:forEach var="rankingPaar" items="${ranking}">
					<li>Platz: <a href="<c:url value="/serien/${fn:replace(rankingPaar[0], ' ', '-')}"/>">${rankingPaar[0]}</a></li>
					<img src="<c:url value="/resources/Media/${rankingPaar[1]}Sterne.png"/> " alt="${rankingPaar[1]}" />
					</c:forEach>	
				</ol>
		 </div>
	</div>
	
	<!-- Footer -->
	<%@ include file="./footer.jsp" %>
	
	<!--  JQuery & JavaScript Scripte einbinden -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src=" <c:url value="/resources/script/standard.js"/> "></script>
</body>
</html>